<script setup lang="ts">
import { watch} from "vue";

import { ref, onMounted } from 'vue';
import {useLoginStore} from "@/stores/login";
import {storeToRefs} from 'pinia'
const loginStore = useLoginStore();
const {password,username} = storeToRefs(loginStore);
const hasPermission = ref(false);

const checkUserPermission = () => {
  // 实现权限判断逻辑
  if(username.value === 'admin' && password.value === 'admin1214') {
    hasPermission.value = true;
  }
};

import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()


watch(username, ()=>{
  checkUserPermission();
})
onMounted(() => {
  checkUserPermission();
});

import { ElMessage } from 'element-plus';

const handleLogout = async () => {
  // try {
  //   const response = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/api/logout`);
  //   console.log('登出响应:', response.data);
  //
  //   // 成功登出，清除 token 并跳转
  //   ElMessage.success('已退出登录！');
  //   localStorage.removeItem('token');
  //   router.push('/login'); // 假设你的登录页面路由是 `/login`
  // } catch (error) {
  //   ElMessage.error('登出失败，请重试');
  //   console.error('登出错误:', error);
  // }

  // 成功登出，清除 token 并跳转
  ElMessage.success('已退出登录！');
  localStorage.removeItem('token');
  router.push('/userLogin'); // 假设你的登录页面路由是 `/login`
};

</script>


<template>
  <div class="d-flex jc-center title_wrap">
    <div class="zuojuxing"></div>
    <div class="youjuxing"></div>
    <div class="left_menu">
      <router-link active-class="active" to="/homepage">综合展示</router-link>
<!--      <router-link active-class="active" to="/homepageThree">首页Three</router-link>-->
      <router-link active-class="active" to="/gepCalcDev">价值核算</router-link>
      <router-link active-class="active" to="/vepCalcDev">VEP核算</router-link>
    </div>
    <div class="right_menu">
      <!--      <router-link active-class="active" to="/gepD4pdf">填报说明</router-link>-->

      <router-link active-class="active" to="/ecoProduce">生态产品展示</router-link>
      <router-link active-class="active" to="/regionalPublicBrand">价值实现路径</router-link>
<!--      <router-link active-class="active" to="/regionalPublicBrandTest">Test</router-link>-->
<!--      <router-link active-class="active" to="/product/detail/hehongcha">test</router-link>-->
<!--      <router-link active-class="active" to="/logout">登出</router-link>-->
      <a href="#" @click.prevent="handleLogout">登出</a>

    </div>
    <!--    <div class="guang"></div>-->
    <div class="d-flex jc-center">

      <div class="title">
<!--        <router-link class="title-text" to="/homepage">铅山县生态产品价值（GEP）核算平台</router-link>-->
        <router-link class="title-text" to="/homepage">铅山县生态产品价值转化支撑平台</router-link>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.title_wrap {
  height: 100px;
  background: url("@/assets/img/images/home_head_title.png") no-repeat center center;
  background-size: cover;
  position: relative;

  margin-bottom: 4px;

  .zuojuxing,
  .youjuxing {
    position: absolute;
    top: -2px;
    width: 140px;
    height: 6px;

  }

  .zuojuxing {
    left: 11%;
  }

  .youjuxing {
    right: 11%;
    transform: rotate(180deg);
  }

  .left_menu,
  .right_menu {
    position: absolute;
    z-index: 2;
    top: 18%;

  }

  .left_menu {
    left: 1%;
  }
  .right_menu {
    right: 1%;
  }
  .left_menu a{

    padding-right: 30px;
    font-size: 23px;
    /* 设置线性渐变背景 */
    background: linear-gradient(180.00deg, rgb(237, 246, 255), rgb(133, 149, 166));

    /* 使用 WebKit 前缀支持背景剪裁为文本 */
    -webkit-background-clip: text;

    /* 使用 WebKit 前缀设置文本填充颜色为透明 */
    -webkit-text-fill-color: transparent;

    /* 使用标准的 CSS 属性支持背景剪裁为文本 */
    background-clip: text;

    /* 设置字体为优设标题黑 */
    font-family: '优设标题黑',serif;

    /* 设置字体粗细为 900 */
    font-weight: 400;
    /* 设置字符间距为 10px */
    letter-spacing: 10px;
    /* 设置文本对齐方式为两端对齐 */
    text-align: justify;
  }


  .right_menu a{

    padding-left: 30px;
    font-size: 23px;
    /* 设置线性渐变背景 */
    background: linear-gradient(180.00deg, rgb(237, 246, 255), rgb(133, 149, 166));

    /* 使用 WebKit 前缀支持背景剪裁为文本 */
    -webkit-background-clip: text;

    /* 使用 WebKit 前缀设置文本填充颜色为透明 */
    -webkit-text-fill-color: transparent;

    /* 使用标准的 CSS 属性支持背景剪裁为文本 */
    background-clip: text;

    /* 设置字体为优设标题黑 */
    font-family: '优设标题黑',serif;

    /* 设置字体粗细为 900 */
    font-weight: 400;
    /* 设置字符间距为 10px */
    letter-spacing: 10px;
    /* 设置文本对齐方式为两端对齐 */
    text-align: justify;

  }

  .left_menu a.active,
  .right_menu a.active {
    font-size: 24px;
    /* 使用 color: #e81717 ; !important 确保优先级 */
    /* font-weight: bold;  可选：加粗字体 */

    /* 设置线性渐变背景 */
    background: linear-gradient(180.00deg, rgb(26, 67, 75), rgb(133, 149, 166));
    /* 使用 WebKit 前缀支持背景剪裁为文本 */
    -webkit-background-clip: text;
    /* 使用 WebKit 前缀设置文本填充颜色为透明 */
    -webkit-text-fill-color: transparent;
    /* 使用标准的 CSS 属性支持背景剪裁为文本 */
    background-clip: text;
  }


}

.title {
  /* 调整首页标题的样式-铅山县生态产品价值（GEP）核算平台 */
  position: relative;
  text-align: center;
  background-size: cover;
  color: transparent;
  height: 60px;
  /* 设置行高为 47px */
  line-height: 47px;
  margin-top: 10px;
  /* 设置字体大小为 36px */
  font-size: 36px;


  .title-text {

    /* 设置线性渐变背景 */
    background: linear-gradient(180.00deg, rgb(237, 246, 255), rgb(133, 149, 166));

    /* 使用 WebKit 前缀支持背景剪裁为文本 */
    -webkit-background-clip: text;

    /* 使用 WebKit 前缀设置文本填充颜色为透明 */
    -webkit-text-fill-color: transparent;

    /* 使用标准的 CSS 属性支持背景剪裁为文本 */
    background-clip: text;

    /* 设置字体为优设标题黑 */
    font-family: '优设标题黑',serif;
    /* 设置字体大小为 36px */
    font-size: 36px;
    /* 设置字体粗细为 900 */
    font-weight: 400;
    /* 设置字符间距为 10px */
    letter-spacing: 10px;
    /* 设置文本对齐方式为两端对齐 */
    text-align: justify;
  }
}
</style>
